<template>
  <div :class="['message-merger message-merger-' + data.message.flow]">
    <div class="merger-box" :data-value="data.message">
        <p class="merger-label1">{{$t('chat.chat_mergertitle')}}</p>
<!-- 		<view>{{JSON.stringify(data)}}</view> -->
        <p class="merger-text"  v-for="(item, index) in data.messageList" :key="index">
			<view class="merger-text1" v-show="index<3">
        <view v-if="item.messageBody[0].type==='TIMTextElem'" class="text">
						<span>{{item.nick}}: </span>
						<span v-html="item.messageBody[0].payload.text"></span>
				</view>
			<view v-if="item.messageBody[0].type==='TIMImageElem'">{{item.nick}}:{{$t('chat.chat_image')}}</view>
			<view v-if="item.messageBody[0].type==='TIMVideoFileElem'">{{item.nick}}:{{$t('chat.chat_video')}}</view>
			<view v-if="item.messageBody[0].type==='TIMFileElem'">{{item.nick}}:{{$t('chat.chat_file')}}</view>
			<view v-if="item.messageBody[0].type==='TIMSoundElem'">{{item.nick}}:{{$t('chat.chat_yuyin')}}</view>
			</view>
        </p>
    </div>
    <span class="merger-label">{{$t('chat.chat_viewall')}}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
import {
	useI18n
} from "vue-i18n";
export default defineComponent({
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      data: {},
    });
	const {
		t
	} = useI18n();
    watchEffect(() => {
      data.data = props.data;
	  // console.log('1211111121111121111'+JSON.stringify(props.data))
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
	.text{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
.message-merger {
	 &-in {
		  background: #fff;
	 }
	 &-out {
		 background: #DCEAFD;
	 }
	max-width: 300rpx;
	display: flex;
	flex-direction: column;
  	display: flex;
  	flex-wrap: wrap;
  	padding: 10px;
    background: #fff;
    border-radius: 10px 10px 10px 10px;
  .merger-label {
    border-top: 1px solid #f1f1f1;
    margin-top: 10px;
    padding-top: 5px;
		font-size: 26rpx;
	  color: #6E7C89;
  }
  .merger-label1 {
      border-bottom: 1px solid #f1f1f1;
      margin-bottom: 10px;
      padding-bottom: 5px;
  }
}
.merger-text1{
	color:#818181;
	font-size: 26rpx;
}
</style>